<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 6.3.0">

  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.ico">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css" integrity="sha256-dABdfBfUoC8vJUBOwGVdm8L9qlMWaHTIfXt+7GnZCIo=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"blog.csgrandeur.cn","root":"/","images":"/images","scheme":"Gemini","darkmode":false,"version":"8.22.0","exturl":false,"sidebar":{"position":"left","width_expanded":320,"width_dual_column":240,"display":"post","padding":18,"offset":12},"hljswrap":true,"copycode":{"enable":true,"style":"default"},"fold":{"enable":false,"height":500},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"duration":200,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"top_n_per_article":1,"unescape":false,"preload":false,"trigger":"auto"}}</script><script src="/js/config.js"></script>

    <meta name="description" content="1. Web的发展 1.1 什么是Web？  Web &#x3D; 万维网（World Wide Web） 它不是互联网（Internet），而是互联网上的一种服务，就像微信、QQ一样。   互联网：像高速公路，连接全球计算机 Web：像高速公路上的&quot;信息专列&quot;，专门运送网页内容  生活类比： 你用手机刷抖音 → 抖音App是&quot;客户端&quot; 你用浏览器看网页 → 浏览器是&quot;客户端&quot;，Web是背后的信息系统">
<meta property="og:type" content="article">
<meta property="og:title" content="02.Web开发基础">
<meta property="og:url" content="http://blog.csgrandeur.cn/2025-09-26-02-Web%E5%BC%80%E5%8F%91%E5%9F%BA%E7%A1%80/index.html">
<meta property="og:site_name" content="CSGrandeur&#39;s Thinking">
<meta property="og:description" content="1. Web的发展 1.1 什么是Web？  Web &#x3D; 万维网（World Wide Web） 它不是互联网（Internet），而是互联网上的一种服务，就像微信、QQ一样。   互联网：像高速公路，连接全球计算机 Web：像高速公路上的&quot;信息专列&quot;，专门运送网页内容  生活类比： 你用手机刷抖音 → 抖音App是&quot;客户端&quot; 你用浏览器看网页 → 浏览器是&quot;客户端&quot;，Web是背后的信息系统">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://blog.csgrandeur.cn/2025-09-26-02-Web%E5%BC%80%E5%8F%91%E5%9F%BA%E7%A1%80/cookie.webp">
<meta property="article:published_time" content="2025-09-26T07:15:26.000Z">
<meta property="article:modified_time" content="2025-11-11T10:06:45.378Z">
<meta property="article:author" content="CSGrandeur">
<meta property="article:tag" content="AI驱动Web开发技术">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://blog.csgrandeur.cn/2025-09-26-02-Web%E5%BC%80%E5%8F%91%E5%9F%BA%E7%A1%80/cookie.webp">


<link rel="canonical" href="http://blog.csgrandeur.cn/2025-09-26-02-Web%E5%BC%80%E5%8F%91%E5%9F%BA%E7%A1%80/">


<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"http://blog.csgrandeur.cn/2025-09-26-02-Web%E5%BC%80%E5%8F%91%E5%9F%BA%E7%A1%80/","path":"2025-09-26-02-Web开发基础/","title":"02.Web开发基础"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>02.Web开发基础 | CSGrandeur's Thinking</title>
  

  <script src="/js/third-party/analytics/baidu-analytics.js"></script>
  <script async src="https://hm.baidu.com/hm.js?7958adf931092425a489778560129144"></script>







  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">CSGrandeur's Thinking</p>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">Cogito Ergo Sum</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="搜索" role="button">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
      <div class="search-header">
        <span class="search-icon">
          <i class="fa fa-search"></i>
        </span>
        <div class="search-input-container">
          <input autocomplete="off" autocapitalize="off" maxlength="80"
                placeholder="搜索..." spellcheck="false"
                type="search" class="search-input">
        </div>
        <span class="popup-btn-close" role="button">
          <i class="fa fa-times-circle"></i>
        </span>
      </div>
      <div class="search-result-container">
        <div class="search-result-icon">
          <i class="fa fa-spinner fa-pulse fa-5x"></i>
        </div>
      </div>
    </div>
  </div>

</header>
        
  
  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#web%E7%9A%84%E5%8F%91%E5%B1%95"><span class="nav-number">1.</span> <span class="nav-text">1. Web的发展</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFweb"><span class="nav-number">1.1.</span> <span class="nav-text">1.1 什么是Web？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#web%E7%9A%84%E4%B8%89%E4%B8%AA%E5%8F%91%E5%B1%95%E9%98%B6%E6%AE%B5"><span class="nav-number">1.2.</span> <span class="nav-text">1.2 Web的三个发展阶段</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#web%E5%A6%82%E4%BD%95%E5%B7%A5%E4%BD%9C%E7%AE%80%E5%8D%95%E7%89%88"><span class="nav-number">1.3.</span> <span class="nav-text">1.3 Web如何工作？（简单版）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E5%AD%A6web%E5%BC%80%E5%8F%91ai%E6%97%B6%E4%BB%A3%E6%96%B0%E6%9C%BA%E9%81%87"><span class="nav-number">1.4.</span> <span class="nav-text">1.4
为什么学Web开发？（AI时代新机遇）</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8A%80%E6%9C%AF%E9%97%A8%E6%A7%9B%E9%99%8D%E4%BD%8E%E4%BA%A7%E5%93%81%E6%80%9D%E7%BB%B4%E6%8F%90%E5%89%8D"><span class="nav-number">1.4.1.</span> <span class="nav-text">✅ 技术门槛降低，产品思维提前</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%B8%8D%E7%94%A8%E7%AD%89%E5%88%B0%E5%A4%A7%E4%B8%89%E7%8E%B0%E5%9C%A8%E5%B0%B1%E8%83%BD%E5%81%9A%E5%87%BA%E5%A5%BD%E5%BA%94%E7%94%A8"><span class="nav-number">1.4.2.</span> <span class="nav-text">✅
不用等到大三，现在就能做出好应用</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%A0%E6%AF%94%E8%80%81%E5%B8%88%E6%9B%B4%E6%87%82%E5%A5%BD%E7%94%A8%E7%9A%84%E7%BD%91%E7%AB%99%E6%98%AF%E4%BB%80%E4%B9%88%E6%A0%B7"><span class="nav-number">1.4.3.</span> <span class="nav-text">✅
你比老师更懂&quot;好用的网站&quot;是什么样</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#web%E5%BC%80%E5%8F%91%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95"><span class="nav-number">2.</span> <span class="nav-text">2. Web开发技术发展</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9C%80%E5%88%9D%E6%97%B6%E4%BB%A3%E7%BA%AFhtml1990s"><span class="nav-number">2.1.</span> <span class="nav-text">2.1 最初时代：纯HTML（1990s）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8A%A8%E6%80%81%E6%97%B6%E4%BB%A3mvc%E6%9E%B6%E6%9E%842000s"><span class="nav-number">2.2.</span> <span class="nav-text">2.2 动态时代：MVC架构（2000s）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E6%97%B6%E4%BB%A3%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B62010s-%E7%8E%B0%E5%9C%A8"><span class="nav-number">2.3.</span> <span class="nav-text">2.3
前后端分离时代：现代前端框架（2010s-现在）</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#mvc-vs-mvvm%E6%9E%B6%E6%9E%84%E5%AF%B9%E6%AF%94"><span class="nav-number">2.3.1.</span> <span class="nav-text">📚 MVC vs MVVM：架构对比</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E6%98%AF%E7%8E%B0%E5%9C%A8%E7%9A%84%E4%B8%BB%E6%B5%81"><span class="nav-number">2.4.</span> <span class="nav-text">2.4
为什么前后端分离是现在的主流？</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%8E%B0%E4%BB%A3web%E6%8A%80%E6%9C%AF%E6%A0%88%E7%BB%84%E6%88%90"><span class="nav-number">3.</span> <span class="nav-text">3. 现代Web技术栈组成</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#web%E5%BC%80%E5%8F%91%E7%9A%84%E5%9B%9B%E5%A4%A7%E6%A0%B8%E5%BF%83"><span class="nav-number">3.1.</span> <span class="nav-text">3.1 Web开发的四大核心</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B%E7%AE%80%E5%8D%95%E7%89%88"><span class="nav-number">3.2.</span> <span class="nav-text">3.2 开发流程（简单版）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9C%AC%E8%AF%BE%E7%A8%8B%E6%8A%80%E6%9C%AF%E6%A0%88%E9%80%89%E6%8B%A9"><span class="nav-number">3.3.</span> <span class="nav-text">3.3 本课程技术栈选择</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%88%91%E4%BB%AC%E4%B8%BA%E4%BB%80%E4%B9%88%E9%80%89%E8%BF%99%E4%BA%9B%E6%8A%80%E6%9C%AF"><span class="nav-number">3.3.1.</span> <span class="nav-text">我们为什么选这些技术？</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B"><span class="nav-number">4.</span> <span class="nav-text">4. 开发环境配置（从零开始）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E6%AD%A5%E9%80%89%E6%8B%A9%E5%B9%B6%E5%AE%89%E8%A3%85%E4%BB%A3%E7%A0%81%E7%BC%96%E8%BE%91%E5%99%A8"><span class="nav-number">4.1.</span> <span class="nav-text">4.1
第一步：选择并安装代码编辑器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E6%AD%A5%E6%8F%92%E4%BB%B6%E5%8F%AF%E9%80%89%E4%B8%8D%E8%A3%85%E4%B9%9F%E5%8F%AF%E4%BB%A5"><span class="nav-number">4.2.</span> <span class="nav-text">4.2
第二步：插件（可选，不装也可以）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AC%AC%E4%B8%89%E6%AD%A5%E5%86%99%E4%BD%A0%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E9%A1%B5hello-world"><span class="nav-number">4.3.</span> <span class="nav-text">4.3
第三步：写你的第一个网页（Hello World）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#html5%E8%AF%AD%E4%B9%89%E5%8C%96%E6%A0%87%E7%AD%BE"><span class="nav-number">5.</span> <span class="nav-text">5. HTML5语义化标签</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFhtml"><span class="nav-number">5.1.</span> <span class="nav-text">5.1 什么是HTML？</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AE%B0%E4%BD%8F%E6%B5%8F%E8%A7%88%E5%99%A8%E8%83%BD%E5%AE%B9%E9%94%99%E4%BD%86%E5%A5%BD%E4%B9%A0%E6%83%AF%E6%9B%B4%E9%87%8D%E8%A6%81"><span class="nav-number">6.</span> <span class="nav-text">&gt; 💡
记住：浏览器能容错，但好习惯更重要！</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#html5-%E6%98%AF%E4%BB%80%E4%B9%88"><span class="nav-number">6.1.</span> <span class="nav-text">5.2 HTML5 是什么？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B8%B8%E7%94%A8html5%E8%AF%AD%E4%B9%89%E5%8C%96%E6%A0%87%E7%AD%BE"><span class="nav-number">6.2.</span> <span class="nav-text">5.3 常用HTML5语义化标签</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E7%94%A8%E8%AF%AD%E4%B9%89%E5%8C%96%E6%A0%87%E7%AD%BE"><span class="nav-number">6.3.</span> <span class="nav-text">5.4 为什么要用语义化标签？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%9E%E6%88%98%E6%90%AD%E5%BB%BA%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E9%A1%B5%E9%9D%A2%E7%BB%93%E6%9E%84"><span class="nav-number">6.4.</span> <span class="nav-text">5.5 实战：搭建一个简单页面结构</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ai%E5%AE%9E%E6%88%98%E4%BD%BF%E7%94%A8ai%E6%90%AD%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%9C%89%E8%B6%A3%E7%9A%84%E5%BF%83%E6%83%85%E6%89%93%E5%8D%A1%E9%A1%B5%E9%9D%A2"><span class="nav-number">7.</span> <span class="nav-text">6.
AI实战：使用AI搭建一个有趣的心情打卡页面</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9C%AC%E8%8A%82%E7%9B%AE%E6%A0%87"><span class="nav-number">7.1.</span> <span class="nav-text">6.1 本节目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E6%AD%A5%E8%AE%A9ai%E7%94%9F%E6%88%90%E4%B8%80%E4%B8%AA%E5%BF%83%E6%83%85%E6%89%93%E5%8D%A1%E9%A1%B5%E9%9D%A2"><span class="nav-number">7.2.</span> <span class="nav-text">6.2
第一步：让AI生成一个心情打卡页面</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#prompt-1%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%BF%83%E6%83%85%E6%89%93%E5%8D%A1%E9%A1%B5%E9%9D%A2"><span class="nav-number">7.2.1.</span> <span class="nav-text">📌 Prompt
1：创建一个心情打卡页面</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ai%E7%94%9F%E6%88%90%E4%BB%A3%E7%A0%81%E4%BF%9D%E5%AD%98%E4%B8%BA-mood.html"><span class="nav-number">7.2.2.</span> <span class="nav-text">✅ AI生成代码（保存为
mood.html）：</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E6%AD%A5%E8%AE%A9ai%E6%B7%BB%E5%8A%A0%E6%9B%B4%E5%A4%9A%E6%9C%89%E8%B6%A3%E7%9A%84%E4%BA%A4%E4%BA%92"><span class="nav-number">7.3.</span> <span class="nav-text">6.3
第二步：让AI添加更多有趣的交互</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#prompt-2%E6%B7%BB%E5%8A%A0%E8%BF%9B%E5%BA%A6%E6%9D%A1%E5%92%8C%E6%8A%98%E5%8F%A0%E5%8C%BA%E5%9F%9F"><span class="nav-number">7.3.1.</span> <span class="nav-text">📌 Prompt
2：添加进度条和折叠区域</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ai%E8%A1%A5%E5%85%85%E4%BB%A3%E7%A0%81"><span class="nav-number">7.3.2.</span> <span class="nav-text">✅ AI补充代码：</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AC%AC%E4%B8%89%E6%AD%A5%E8%AE%A9ai%E6%B7%BB%E5%8A%A0%E7%AE%80%E5%8D%95%E7%9A%84%E4%BA%A4%E4%BA%92%E6%95%88%E6%9E%9C"><span class="nav-number">7.4.</span> <span class="nav-text">6.4
第三步：让AI添加简单的交互效果</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#prompt-3%E6%B7%BB%E5%8A%A0%E7%AE%80%E5%8D%95%E7%9A%84javascript%E4%BA%A4%E4%BA%92"><span class="nav-number">7.4.1.</span> <span class="nav-text">📌 Prompt
3：添加简单的JavaScript交互</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ai%E8%A1%A5%E5%85%85%E4%BB%A3%E7%A0%81-1"><span class="nav-number">7.4.2.</span> <span class="nav-text">✅ AI补充代码：</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9C%80%E7%BB%88%E6%95%88%E6%9E%9C"><span class="nav-number">7.5.</span> <span class="nav-text">6.5 最终效果</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9C%AC%E8%8A%82%E6%94%B6%E8%8E%B7"><span class="nav-number">7.6.</span> <span class="nav-text">6.6 本节收获</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E8%B0%83%E8%AF%95%E6%8A%80%E5%B7%A7f12%E7%9A%84%E4%B8%89%E5%A4%A7%E6%B3%95%E5%AE%9D"><span class="nav-number">8.</span> <span class="nav-text">7.*浏览器调试技巧（F12的三大法宝）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%80%8E%E4%B9%88%E6%89%93%E5%BC%80f12"><span class="nav-number">8.1.</span> <span class="nav-text">🔧 怎么打开F12？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%83%E7%B4%A0%E6%A0%87%E7%AD%BE%E9%A1%B5-%E6%9F%A5%E7%9C%8B%E5%92%8C%E4%BF%AE%E6%94%B9%E7%BD%91%E9%A1%B5%E7%BB%93%E6%9E%84"><span class="nav-number">8.2.</span> <span class="nav-text">1. 【元素】标签页 ——
查看和修改网页结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8E%A7%E5%88%B6%E5%8F%B0%E6%A0%87%E7%AD%BE%E9%A1%B5-%E5%92%8Cjavascript%E5%AF%B9%E8%AF%9D"><span class="nav-number">8.3.</span> <span class="nav-text">2. 【控制台】标签页 ——
和JavaScript对话</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BD%91%E7%BB%9C%E6%A0%87%E7%AD%BE%E9%A1%B5-%E7%9C%8B%E7%BD%91%E9%A1%B5%E4%B8%8B%E8%BD%BD%E4%BA%86%E4%BB%80%E4%B9%88"><span class="nav-number">8.4.</span> <span class="nav-text">3. 【网络】标签页 ——
看网页“下载了什么”</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BA%94%E7%94%A8%E6%A0%87%E7%AD%BE%E9%A1%B5-%E6%9F%A5%E7%9C%8B%E7%BD%91%E9%A1%B5%E5%AD%98%E5%82%A8%E7%9A%84%E6%95%B0%E6%8D%AE"><span class="nav-number">8.5.</span> <span class="nav-text">4. 【应用】标签页 ——
查看网页存储的数据</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#cookie%E5%B0%8F%E9%A5%BC%E5%B9%B2"><span class="nav-number">8.5.1.</span> <span class="nav-text">4.1 Cookie（小饼干）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#localstorage%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8"><span class="nav-number">8.5.2.</span> <span class="nav-text">4.2 LocalStorage（本地存储）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#indexeddb%E6%95%B0%E6%8D%AE%E5%BA%93"><span class="nav-number">8.5.3.</span> <span class="nav-text">4.3 IndexedDB（数据库）</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BD%91%E7%BB%9C%E6%A0%87%E7%AD%BE%E9%A1%B5%E9%AB%98%E7%BA%A7%E7%94%A8%E6%B3%95-%E7%9B%91%E6%8E%A7%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82"><span class="nav-number">8.6.</span> <span class="nav-text">5. 【网络】标签页高级用法 ——
监控网络请求</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%80%BB%E7%BB%93f12%E4%BA%94%E5%A4%A7%E5%8A%9F%E8%83%BD"><span class="nav-number">8.7.</span> <span class="nav-text">🌟 总结：F12五大功能</span></a></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">CSGrandeur</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">72</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">6</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">22</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>

        </div>
      </div>
    </div>

    
  </aside>


    </div>

    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://blog.csgrandeur.cn/2025-09-26-02-Web%E5%BC%80%E5%8F%91%E5%9F%BA%E7%A1%80/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="CSGrandeur">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="CSGrandeur's Thinking">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="02.Web开发基础 | CSGrandeur's Thinking">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          02.Web开发基础
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2025-09-26 15:15:26" itemprop="dateCreated datePublished" datetime="2025-09-26T15:15:26+08:00">2025-09-26</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2025-11-11 18:06:45" itemprop="dateModified" datetime="2025-11-11T18:06:45+08:00">2025-11-11</time>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody"><h2 id="web的发展">1. Web的发展</h2>
<h3 id="什么是web">1.1 什么是Web？</h3>
<blockquote>
<p><strong>Web = 万维网</strong>（World Wide Web）<br />
它不是互联网（Internet），而是<strong>互联网上的一种服务</strong>，就像微信、QQ一样。</p>
</blockquote>
<ul>
<li><strong>互联网</strong>：像高速公路，连接全球计算机</li>
<li><strong>Web</strong>：像高速公路上的"信息专列"，专门运送网页内容</li>
</ul>
<p><strong>生活类比</strong>：</p>
<p>你用手机刷抖音 → 抖音App是"客户端"<br />
你用浏览器看网页 → 浏览器是"客户端"，Web是背后的信息系统</p>
<span id="more"></span>
<hr />
<h3 id="web的三个发展阶段">1.2 Web的三个发展阶段</h3>
<table>
<colgroup>
<col style="width: 25%" />
<col style="width: 25%" />
<col style="width: 25%" />
<col style="width: 25%" />
</colgroup>
<thead>
<tr class="header">
<th>阶段</th>
<th>时间</th>
<th>特点</th>
<th>例子</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>Web 1.0</strong></td>
<td>1990s-2000s</td>
<td>只读网页<br>用户只能看，不能互动</td>
<td>早期新浪、搜狐</td>
</tr>
<tr class="even">
<td><strong>Web 2.0</strong></td>
<td>2000s-现在</td>
<td>人人可参与<br>用户能发评论、发视频</td>
<td>微信公众号、抖音、微博</td>
</tr>
<tr class="odd">
<td><strong>Web 3.0</strong></td>
<td>正在发展</td>
<td><strong>语义网</strong>：机器能理解网页内容<br><strong>Web3</strong>：去中心化，用户拥有数据</td>
<td>语义网：智能搜索、数据自动整合<br>Web3：区块链应用、NFT、去中心化社交</td>
</tr>
</tbody>
</table>
<blockquote>
<p>💡 <strong>说明</strong>：<br />
Web 3.0 有两种主流定义：<br />
1. <strong>语义网（Semantic
Web）</strong>：由万维网之父提出，让机器能理解网页内容的含义，实现更智能的数据整合<br />
2.
<strong>Web3</strong>：强调去中心化，用户拥有自己的数据，不依赖大公司平台</p>
<p>注意：AI推荐、个性化内容属于Web 2.0的增强功能，不是Web
3.0的核心特征。</p>
</blockquote>
<hr />
<h3 id="web如何工作简单版">1.3 Web如何工作？（简单版）</h3>
<p><strong>当你在浏览器输入 <code>www.baidu.com</code>
时，发生了什么？</strong></p>
<ol type="1">
<li><strong>你</strong>：输入网址 → 回车</li>
<li><strong>浏览器</strong>：向百度的服务器"喊一嗓子"："把网页给我！"</li>
<li><strong>服务器</strong>：打包网页文件（HTML+CSS+JS）→ 发送回来</li>
<li><strong>浏览器</strong>：收到文件 → 拆包 → 显示网页</li>
</ol>
<p><strong>示意图</strong>：</p>
<figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">           Web工作流程示意图</span><br><span class="line">═══════════════════════════════════════════════════════════</span><br><span class="line">    [你]                    [百度服务器]</span><br><span class="line">     │                              │</span><br><span class="line">     │  ① 输入网址 + 回车            │</span><br><span class="line">     ▼                              │</span><br><span class="line">  [浏览器]                          │</span><br><span class="line">     │                              │</span><br><span class="line">     │  ② HTTP请求 &quot;把网页给我！&quot;    │</span><br><span class="line">     │─────────────────────────────&gt;│</span><br><span class="line">     │                              │ ③ 查找文件</span><br><span class="line">     │                              │    (HTML+CSS+JS)</span><br><span class="line">     │                              ▼</span><br><span class="line">     │                        [服务器处理]</span><br><span class="line">     │                              │ ④ 打包文件</span><br><span class="line">     │                              │</span><br><span class="line">     │  ⑤ HTTP响应                 │</span><br><span class="line">     │     &lt;HTML/CSS/JS&gt;            │</span><br><span class="line">     │&lt;─────────────────────────────│</span><br><span class="line">     ▼                              │</span><br><span class="line">  [浏览器]                          │</span><br><span class="line">     │  ⑥ 解析并显示网页            │</span><br><span class="line">     ▼                              │</span><br><span class="line">    [你看到网页]                    │</span><br><span class="line">═══════════════════════════════════════════════════════════</span><br></pre></td></tr></table></figure>
<blockquote>
<p>💡 <strong>关键概念</strong>：<br />
- <strong>客户端</strong>：你的浏览器（发起请求） -
<strong>服务器</strong>：百度的电脑（响应请求） -
<strong>HTTP</strong>：它们之间的"通话协议"</p>
</blockquote>
<hr />
<h3 id="为什么学web开发ai时代新机遇">1.4
为什么学Web开发？（AI时代新机遇）</h3>
<table>
<colgroup>
<col style="width: 25%" />
<col style="width: 25%" />
<col style="width: 50%" />
</colgroup>
<thead>
<tr class="header">
<th>理由</th>
<th>说明</th>
<th>AI时代的加持</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>应用广泛</strong></td>
<td>所有公司都需要网站/系统</td>
<td>AI生成代码，快速实现需求</td>
</tr>
<tr class="even">
<td><strong>入门简单</strong></td>
<td>用浏览器就能看到效果</td>
<td>AI辅助，减少调试时间</td>
</tr>
<tr class="odd">
<td><strong>就业机会多</strong></td>
<td>企业数字化转型需求大</td>
<td>AI工具成为标配，掌握者更有优势</td>
</tr>
<tr class="even">
<td><strong>适合创新</strong></td>
<td>自己做个小网站，就能上线</td>
<td><strong>不再需要学到大三大四，大一就能做出完整产品</strong></td>
</tr>
</tbody>
</table>
<p><strong>AI时代：大一学生的新优势</strong>：</p>
<h4 id="技术门槛降低产品思维提前">✅ 技术门槛降低，产品思维提前</h4>
<ul>
<li><strong>以前</strong>：需要花2-3年学语法、框架、调试，才能做出像样的应用</li>
<li><strong>现在</strong>：AI帮你写代码，你可以<strong>从大一开始就思考产品设计</strong>：
<ul>
<li>用户需要什么？</li>
<li>功能怎么设计？</li>
<li>体验如何优化？</li>
</ul></li>
</ul>
<h4 id="不用等到大三现在就能做出好应用">✅
不用等到大三，现在就能做出好应用</h4>
<ul>
<li><strong>传统路径</strong>：大一大二学基础 → 大三做项目 →
大四找实习</li>
<li><strong>AI驱动路径</strong>：大一开始就做项目 → 用AI实现想法 →
边做边学理论</li>
</ul>
<h4 id="你比老师更懂好用的网站是什么样">✅
你比老师更懂"好用的网站"是什么样</h4>
<ul>
<li>你每天都在用Web（微信、抖音、B站）</li>
<li>你有"用户思维"，知道什么是好体验</li>
<li><strong>AI帮你把"想法"变成"代码"</strong>，你负责思考和设计</li>
</ul>
<blockquote>
<p>💡 <strong>重要提醒</strong>（参考第一章）：<br />
AI降低了<strong>实现难度</strong>，但<strong>不能替代理论基础</strong>。<br />
- 必须学好：数据结构、算法、系统设计原理<br />
- 必须理解：代码为什么这样写，而不是"能用就行"<br />
- 只有理解原理，才能让AI生成真正优秀的代码</p>
<p><strong>记住</strong>：AI是工具，产品思维和理论基础才是核心竞争力！</p>
</blockquote>
<hr />
<h2 id="web开发技术发展">2. Web开发技术发展</h2>
<h3 id="最初时代纯html1990s">2.1 最初时代：纯HTML（1990s）</h3>
<p><strong>特点</strong>：</p>
<ul>
<li>网页 = 静态文件（.html）</li>
<li>修改内容 → 直接改代码</li>
<li>没有"交互"，只能看</li>
</ul>
<p><strong>例子</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>我的第一个网页<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>欢迎来到我的网站！<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>💡 <strong>问题</strong>：<br />
想改标题？必须改代码！<br />
想加新页面？必须新建文件！</p>
</blockquote>
<hr />
<h3 id="动态时代mvc架构2000s">2.2 动态时代：MVC架构（2000s）</h3>
<p><strong>MVC架构：把网站分成三部分</strong></p>
<p>MVC把网站开发分成三个部分，就像餐厅的三个角色：</p>
<table>
<thead>
<tr class="header">
<th>部分</th>
<th>作用</th>
<th>餐厅类比</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>Model（模型）</strong></td>
<td>存储数据的地方</td>
<td>厨房的食材仓库</td>
</tr>
<tr class="even">
<td><strong>View（视图）</strong></td>
<td>用户看到的网页界面</td>
<td>餐厅的菜单</td>
</tr>
<tr class="odd">
<td><strong>Controller（控制器）</strong></td>
<td>处理用户的操作请求</td>
<td>厨师（接单、做菜）</td>
</tr>
</tbody>
</table>
<p><strong>MVC的工作流程</strong>：</p>
<ol type="1">
<li>用户在网页上点击"提交"（View接收操作）</li>
<li>Controller处理请求（厨师接单）</li>
<li>Controller从Model获取数据（厨师去仓库拿食材）</li>
<li>Controller处理后将结果返回View（厨师做好菜，更新菜单）</li>
</ol>
<p><strong>经典框架</strong>：</p>
<ul>
<li>Ruby on Rails（2004年，Ruby语言）</li>
<li>Django（2005年，Python语言）</li>
<li>ThinkPHP（2006年，PHP语言）</li>
<li>Spring MVC（2003年，Java语言）</li>
</ul>
<p><strong>技术优势</strong>：<br />
✅ 网页内容可以自动变化，无需修改代码<br />
✅ 例如：今天有100个用户，明天有200个用户，页面会自动显示正确的数字</p>
<hr />
<h3 id="前后端分离时代现代前端框架2010s-现在">2.3
前后端分离时代：现代前端框架（2010s-现在）</h3>
<p><strong>前后端分离：两个独立的"厨房"</strong></p>
<p>传统开发方式：所有代码混在一起，就像在一个厨房里完成所有工作。</p>
<p>现代开发方式：前端和后端分离，就像餐厅有两个独立区域：</p>
<ul>
<li><strong>前端</strong>：用户看到的网页界面，负责展示和交互（类似餐厅的装修和菜单）</li>
<li><strong>后端</strong>：处理数据存储和业务逻辑的服务器（类似厨房，负责数据处理）</li>
</ul>
<p><strong>核心思想</strong>：</p>
<ul>
<li>前端和后端独立开发，互不干扰</li>
<li>通过API接口（Application Programming
Interface）进行通信，类似服务员在餐厅和厨房之间传递订单</li>
<li>修改前端界面不影响后端逻辑，修改后端逻辑不影响前端界面</li>
</ul>
<blockquote>
<p>💡 <strong>类比理解</strong>：<br />
类似手机App更新：你更新了界面外观（图标、颜色），但后台的数据处理逻辑（账号密码存储）保持不变。</p>
</blockquote>
<h4 id="mvc-vs-mvvm架构对比">📚 MVC vs MVVM：架构对比</h4>
<p><strong>MVC与MVVM的区别</strong></p>
<p>MVC和MVVM是两种不同的架构模式，可以用纸质菜单和Pad点菜来类比：</p>
<table>
<colgroup>
<col style="width: 16%" />
<col style="width: 39%" />
<col style="width: 43%" />
</colgroup>
<thead>
<tr class="header">
<th>对比项</th>
<th>MVC架构（纸质菜单）</th>
<th>MVVM架构（Pad点菜）</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>组成部分</strong></td>
<td><strong>Model</strong> = 厨房的食材库存<br><strong>View</strong> =
纸质菜单<br><strong>Controller</strong> = 服务员/厨师（处理订单）</td>
<td><strong>Model</strong> =
Pad上显示的数据（从后端获取）<br><strong>View</strong> =
Pad上的菜单界面<br><strong>ViewModel</strong> =
Pad菜单和数据的绑定关系<br><br><strong>注意</strong>：后端仍然有Controller处理业务逻辑</td>
</tr>
<tr class="even">
<td><strong>工作流程</strong></td>
<td><strong>纸质菜单流程</strong>：<br>1.
顾客看纸质菜单点"番茄炒蛋"<br>2. 服务员（Controller）记下订单<br>3.
厨师去厨房拿食材<br>4.
如果食材卖完了，需要<strong>手动</strong>在纸质菜单上划掉或贴标签</td>
<td><strong>Pad点菜流程</strong>：<br>1. 顾客在Pad上点"番茄炒蛋"<br>2.
Pad（前端MVVM）发送请求到后端<br>3. 后端Controller处理订单<br>4.
如果后台库存显示食材没了，Pad上的这道菜<strong>自动变灰</strong>或消失<br>（因为Pad菜单和库存数据是绑定的）</td>
</tr>
<tr class="odd">
<td><strong>数据更新方式</strong></td>
<td><strong>手动更新</strong>：<br>库存变了 →
需要服务员或厨师<strong>手动</strong>去改纸质菜单<br>（比如划掉、贴标签、换新菜单）</td>
<td><strong>自动绑定</strong>：<br>库存变了 →
Pad上的菜单<strong>自动跟着更新</strong><br>（就像Pad点菜系统，后台数据变了，界面自动变）</td>
</tr>
<tr class="even">
<td><strong>代码实现</strong></td>
<td>手动管理数据流向<br><br><code>javascript&lt;br&gt;// 数据变化时，需要手动更新界面&lt;br&gt;model.name = "李四";&lt;br&gt;view.innerHTML = model.name; // 手动更新&lt;br&gt;</code></td>
<td>代码更简洁<br>数据和界面自动绑定<br><br><code>javascript&lt;br&gt;// 数据和界面绑定，数据变，界面自动变&lt;br&gt;data: &#123; name: "李四" &#125;&lt;br&gt;// 界面自动显示，无需手动更新代码&lt;br&gt;</code></td>
</tr>
<tr class="odd">
<td><strong>适用场景</strong></td>
<td>后端开发<br>（数据处理、存储）</td>
<td>前端开发<br>（用户界面）</td>
</tr>
<tr class="even">
<td><strong>学习难度</strong></td>
<td>逻辑清晰，但需要编写较多代码</td>
<td>需要理解数据绑定概念，但代码量更少</td>
</tr>
</tbody>
</table>
<blockquote>
<p>💡 <strong>核心区别</strong>：<br />
-
<strong>MVC</strong>：数据和界面分开，需要手动写代码更新界面（就像纸质菜单，库存变了需要手动划掉）<br />
-
<strong>MVVM</strong>：数据和界面绑定，数据变化时界面自动更新（就像Pad点菜，库存变了菜单自动更新）</p>
<p><strong>MVVM的本质</strong>：<br />
就像Pad点菜系统，后台库存数据变了，Pad上的菜单自动跟着变。MVVM让网页的显示内容和数据自动绑定，数据变了，显示自动跟着变，不需要手动写代码更新界面。</p>
</blockquote>
<p>在完整的前后端分离架构中：</p>
<ul>
<li><strong>前端（MVVM）</strong>：负责界面展示和用户交互
<ul>
<li>Model = 前端的数据（从后端API获取）</li>
<li>View = 网页界面</li>
<li>ViewModel = 数据绑定逻辑</li>
</ul></li>
<li><strong>后端（仍然使用MVC或类似架构）</strong>：负责处理业务逻辑和数据存储
<ul>
<li>Model = 数据库</li>
<li>View = 数据接口（返回JSON数据，不再是HTML页面）</li>
<li>Controller = 处理业务逻辑（接收请求、处理数据、返回结果）</li>
</ul></li>
</ul>
<blockquote>
<p>💡
<strong>说明</strong>：在前后端分离架构中，后端的View层不再是生成HTML页面，而是提供数据接口供前端调用。这些接口通常设计为RESTful风格（使用GET、POST等HTTP方法），但RESTful是API设计规范，不是MVC架构的一部分。</p>
</blockquote>
<p><strong>完整架构示例</strong>： <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">用户点击Pad → 前端MVVM处理交互 → 调用后端API → 后端Controller处理业务逻辑 → 返回数据 → 前端ViewModel更新显示</span><br></pre></td></tr></table></figure></p>
<p>所以，MVVM是前端架构，后端仍然需要Controller来处理业务逻辑和数据操作。</p>
<p><strong>经典框架</strong>：</p>
<ul>
<li><strong>前端框架</strong>：Vue.js（2014年）、React（2013年）、Angular（2010年）</li>
<li><strong>后端框架</strong>：Express（Node.js，2010年）、Spring
Boot（Java，2014年）、FastAPI（Python，2018年）</li>
</ul>
<hr />
<h3 id="为什么前后端分离是现在的主流">2.4
为什么前后端分离是现在的主流？</h3>
<table>
<thead>
<tr class="header">
<th>优势</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>开发效率高</strong></td>
<td>前后端可以并行开发</td>
</tr>
<tr class="even">
<td><strong>维护方便</strong></td>
<td>改前端不影响后端</td>
</tr>
<tr class="odd">
<td><strong>适合团队</strong></td>
<td>分工明确，各司其职</td>
</tr>
<tr class="even">
<td><strong>跨平台</strong></td>
<td>一套后端，支持网页、App、小程序</td>
</tr>
</tbody>
</table>
<hr />
<h2 id="现代web技术栈组成">3. 现代Web技术栈组成</h2>
<h3 id="web开发的四大核心">3.1 Web开发的四大核心</h3>
<table>
<colgroup>
<col style="width: 27%" />
<col style="width: 27%" />
<col style="width: 45%" />
</colgroup>
<thead>
<tr class="header">
<th>部分</th>
<th>作用</th>
<th>常见技术</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>前端</strong></td>
<td>用户看到的界面<br>（网页的"脸"）</td>
<td>HTML、CSS、JavaScript、Vue、React</td>
</tr>
<tr class="even">
<td><strong>后端</strong></td>
<td>处理数据和逻辑<br>（网页的"大脑"）</td>
<td>Python、Java、Go、Node.js</td>
</tr>
<tr class="odd">
<td><strong>数据库</strong></td>
<td>存储和管理数据<br>（网页的"记忆"）</td>
<td>MySQL、PostgreSQL、MongoDB</td>
</tr>
<tr class="even">
<td><strong>部署</strong></td>
<td>让网站上线运行<br>（网页的"家"）</td>
<td>Docker、Nginx、云服务器</td>
</tr>
</tbody>
</table>
<blockquote>
<p>💡 <strong>生活类比</strong>：<br />
开餐馆 = 做网站<br />
- 前端 = 餐厅装修 + 菜单设计<br />
- 后端 = 厨房做菜 + 库存管理<br />
- <strong>数据库</strong> = 冰箱 + 账本（存食材、记账）<br />
- 部署 = 租店面 + 办营业执照</p>
</blockquote>
<hr />
<h3 id="开发流程简单版">3.2 开发流程（简单版）</h3>
<p><strong>基本流程</strong>： <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">写代码 → 测试功能 → 用Docker打包 → 部署上线</span><br></pre></td></tr></table></figure></p>
<p><strong>CI/CD简介</strong>：</p>
<ul>
<li><strong>CI</strong> = Continuous Integration（持续集成）</li>
<li><strong>CD</strong> = Continuous Delivery（持续交付）或 Continuous
Deployment（持续部署）</li>
<li><strong>CI/CD</strong>：自动化测试和部署（企业级功能）</li>
<li><strong>对你的意义</strong>：先专注"把功能做出来"，CI/CD后续再学</li>
</ul>
<hr />
<h3 id="本课程技术栈选择">3.3 本课程技术栈选择</h3>
<h4 id="我们为什么选这些技术">我们为什么选这些技术？</h4>
<table>
<colgroup>
<col style="width: 20%" />
<col style="width: 40%" />
<col style="width: 40%" />
</colgroup>
<thead>
<tr class="header">
<th>技术</th>
<th>为什么选它</th>
<th>对你的好处</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>FastAPI</strong>（后端）</td>
<td>基于Python<sup>①</sup><br>自动生成API文档<sup>②</sup>、类型提示、高性能<sup>③</sup><br>适合初学者快速上手</td>
<td>✅ 大部分学校大一会有Python课<br>✅ 学习资源丰富<sup>①</sup><br>✅
自动生成文档，开发效率高<sup>②</sup><br>✅ 未来可做数据分析、AI</td>
</tr>
<tr class="even">
<td><strong>Vue 3</strong>（前端）</td>
<td>中文文档全<sup>④</sup><br>国人尤雨溪开发<sup>⑤</sup>，社区活跃</td>
<td>✅ 上手快，教程多<sup>④</sup><br>✅
国产技术，有亲切感<sup>⑤</sup></td>
</tr>
<tr class="odd">
<td><strong>Ant Design Vue</strong>（UI框架）</td>
<td>企业级组件库<sup>⑨</sup><br>中文文档完善<sup>⑩</sup>，组件丰富</td>
<td>✅ 不用从零写UI，开发效率高<sup>⑨</sup><br>✅
中文文档，学习友好<sup>⑩</sup></td>
</tr>
<tr class="even">
<td><strong>MySQL</strong>（数据库）</td>
<td>免费开源<sup>⑥</sup>、语法简单<br>全球最流行的关系型数据库<sup>⑦</sup></td>
<td>✅ 学会SQL基础<br>✅ 企业广泛使用，求职加分<sup>⑦</sup></td>
</tr>
<tr class="odd">
<td><strong>Docker</strong>（部署）</td>
<td>解决"在我电脑能跑，在别人电脑就能跑"<sup>⑧</sup><br>一键部署，避免环境问题</td>
<td>✅ 学完就能上线项目<br>✅ 企业真实用的技术</td>
</tr>
</tbody>
</table>
<p><strong>详细说明</strong>：</p>
<p>① <strong>Python流行度</strong>：根据<a
target="_blank" rel="noopener" href="https://www.tiobe.com/tiobe-index/">TIOBE编程语言排行榜</a>（2025年10月），Python在该指数中排名第一（24.45%），自2023年底以来持续位居榜首。Python的流行度意味着：丰富的学习资源（教程、书籍、视频）、活跃的开发者社区（遇到问题容易找到答案）、广泛的就业机会（很多公司都用Python）。</p>
<p>②
<strong>自动生成API文档</strong>：FastAPI会根据你的代码自动生成交互式API文档（类似说明书），访问特定网址就能看到所有接口的说明，还能直接测试。这样你就不用花时间手写文档了，而且写出来的代码就是文档，减少出错。</p>
<p>③
<strong>高性能</strong>：FastAPI基于Starlette和Pydantic构建，性能接近Node.js和Go等高性能语言，是Python中最快的Web框架之一。这意味着即使你的网站访问量很大，也能快速响应，不会卡顿。</p>
<p>④ <strong>Vue 3中文文档</strong>：Vue
3有完整的中文官方文档，这意味着你不需要看英文就能学会。而且国内有很多Vue的教程和视频，学习资源丰富，遇到问题容易找到中文解答。</p>
<p>⑤ <strong>尤雨溪（Evan
You）</strong>：Vue的创始人，中国人，曾就职于Google。Vue是中国人主导的开源项目，在全球广泛使用，作为国产技术更容易获得社区支持，也更有亲切感。</p>
<p>⑥
<strong>MySQL免费开源</strong>：MySQL是完全免费的，不需要花钱就能使用。开源意味着你可以看源代码，理解底层原理。对于学生来说，免费是最重要的，不用担心版权问题。</p>
<p>⑦
<strong>MySQL流行度</strong>：MySQL是全球最流行的关系型数据库之一，被大量企业使用（包括阿里巴巴、腾讯、Facebook等）。学会MySQL意味着你掌握了企业实际使用的技术，求职时更有竞争力。很多公司的招聘要求都会提到MySQL。</p>
<p>⑧
<strong>Docker解决环境问题</strong>：这是所有开发者都会遇到的经典问题："在我电脑上能跑，为什么在你电脑上不行？"Docker把应用和运行环境打包在一起，就像把整个"房间"一起搬走，这样在任何电脑上都能运行，避免了"环境配置"这个让人头疼的问题。</p>
<p>⑨ <strong>Ant Design Vue企业级组件库</strong>：Ant Design
Vue提供了大量现成的UI组件（按钮、表格、表单、菜单等），你不需要从零开始写样式和布局。这意味着你可以把更多时间花在业务逻辑上，而不是写CSS样式。而且这些组件都经过精心设计，做出来的页面看起来专业、统一。</p>
<p>⑩ <strong>Ant Design Vue中文文档</strong>：Ant Design
Vue是蚂蚁集团（支付宝的母公司）开源的企业级UI框架，有完整的中文官方文档。对于大一学生来说，这意味着你可以直接用中文学习，不需要看英文文档，遇到问题也容易找到中文解答。</p>
<blockquote>
<p>99%的Web项目<strong>不会遇到性能瓶颈</strong><br />
先学会"怎么做"，再考虑"怎么更快"
技术会变，但<strong>开发逻辑不变</strong>。
<strong>先掌握一套"能跑通"的技术栈，比纠结"哪个最好"更重要！</strong></p>
</blockquote>
<hr />
<h2 id="开发环境配置从零开始">4. 开发环境配置（从零开始）</h2>
<h3 id="第一步选择并安装代码编辑器">4.1
第一步：选择并安装代码编辑器</h3>
<p>你需要一个<strong>代码编辑器</strong>来写代码。选一个：</p>
<table>
<colgroup>
<col style="width: 33%" />
<col style="width: 25%" />
<col style="width: 41%" />
</colgroup>
<thead>
<tr class="header">
<th>编辑器</th>
<th>特点</th>
<th>下载地址</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>VS Code</strong></td>
<td>免费、轻量级、功能强大<br>微软官方出品</td>
<td><a
target="_blank" rel="noopener" href="https://code.visualstudio.com/">code.visualstudio.com</a></td>
</tr>
<tr class="even">
<td><strong>Cursor</strong></td>
<td>专注AI编程的编辑器<br>轻量级、内置AI编程助手<br>需要付费（学生可申请免费）</td>
<td><a target="_blank" rel="noopener" href="https://cursor.sh/">cursor.sh</a></td>
</tr>
<tr class="odd">
<td><strong>Trae</strong></td>
<td>字节跳动出品，完全免费<br>轻量级、支持GPT-4o和Claude模型<br>目前仅支持macOS</td>
<td><a target="_blank" rel="noopener" href="https://trae.com/">trae.com</a></td>
</tr>
<tr class="even">
<td><strong>PyCharm 社区版</strong></td>
<td>JetBrains出品，功能强大<br>重量级、专为Python设计<br>现在也支持AI助手（AI
Assistant）<br>适合未来深入学习Python</td>
<td><a
target="_blank" rel="noopener" href="https://www.jetbrains.com/pycharm/">jetbrains.com/pycharm</a></td>
</tr>
</tbody>
</table>
<blockquote>
<p>💡 <strong>轻量级 vs 重量级</strong>：<br />
- <strong>轻量级</strong>（VS
Code、Cursor、Trae）：启动快、占用资源少、适合初学者 -
<strong>重量级</strong>（PyCharm）：功能更强大、集成更多工具、但启动慢、占用资源多</p>
<p><strong>建议</strong>：如果你是第一次学编程，推荐从<strong>VS
Code</strong>开始，它最简单、免费、教程最多。如果未来要深入学习Python，可以考虑PyCharm社区版。</p>
</blockquote>
<hr />
<h3 id="第二步插件可选不装也可以">4.2
第二步：插件（可选，不装也可以）</h3>
<p><strong>好消息</strong>：VS
Code本身已经支持HTML、CSS、JavaScript的基础功能（语法高亮、代码提示），<strong>不装任何插件也能写代码</strong>！</p>
<p>如果你想安装插件提升体验，可以安装：</p>
<table>
<colgroup>
<col style="width: 25%" />
<col style="width: 25%" />
<col style="width: 50%" />
</colgroup>
<thead>
<tr class="header">
<th>插件</th>
<th>作用</th>
<th>搜索关键词</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>Prettier</strong></td>
<td>自动格式化代码，让代码更整齐<br>（可选，但很实用）</td>
<td><code>Prettier</code></td>
</tr>
</tbody>
</table>
<blockquote>
<p>💡
<strong>说明</strong>：不装插件也能写代码。写HTML文件后，直接用浏览器打开文件就能看到效果，不需要Live
Server。</p>
</blockquote>
<hr />
<h3 id="第三步写你的第一个网页hello-world">4.3
第三步：写你的第一个网页（Hello World）</h3>
<p><strong>不用任何框架，从最基础的HTML开始！</strong></p>
<ol type="1">
<li><strong>打开VS Code</strong>，点击"文件" → "新建文件夹" →
创建一个名为 <code>my-first-web</code> 的文件夹</li>
<li><strong>在文件夹里新建一个文件</strong>，命名为
<code>index.html</code>（注意：文件名必须是 <code>.html</code>
结尾）</li>
<li><strong>在文件中输入以下代码</strong>：</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>我的第一个网页<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Hello World!<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是我的第一个网页！<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>代码说明</strong>（每个标签的作用）：</p>
<ul>
<li><code>&lt;!DOCTYPE html&gt;</code>：告诉浏览器这是HTML5格式的网页（必须放在第一行）</li>
<li><code>&lt;html&gt;</code>：网页的"容器"，所有内容都包在里面</li>
<li><code>&lt;head&gt;</code>：网页的"头部"，放一些不显示的内容（如标题、样式）</li>
<li><code>&lt;title&gt;</code>：网页标题，显示在浏览器标签页上</li>
<li><code>&lt;body&gt;</code>：网页的"身体"，放所有要显示的内容</li>
<li><code>&lt;h1&gt;</code>：一级标题（最大号的标题）</li>
<li><code>&lt;p&gt;</code>：段落（普通文字）</li>
</ul>
<ol type="1">
<li><strong>运行网页</strong>：
<ul>
<li>找到 <code>index.html</code> 文件（在文件夹里）</li>
<li>双击文件，浏览器会自动打开，显示你的网页！</li>
<li>或者右键文件 → "打开方式" → 选择浏览器</li>
</ul></li>
<li><strong>修改试试</strong>：
<ul>
<li>把 <code>&lt;h1&gt;Hello World!&lt;/h1&gt;</code> 改成
<code>&lt;h1&gt;你好，世界！&lt;/h1&gt;</code></li>
<li>保存文件（Ctrl+S）</li>
<li>在浏览器中按F5刷新，就能看到新内容！</li>
</ul></li>
</ol>
<blockquote>
<p>🌟 <strong>恭喜！</strong> 你已经成功创建了第一个网页！<br />
这就是最基础的Web开发，不需要任何框架，不需要安装数据库，不需要运行服务器，就是这么简单！</p>
</blockquote>
<hr />
<h2 id="html5语义化标签">5. HTML5语义化标签</h2>
<h3 id="什么是html">5.1 什么是HTML？</h3>
<blockquote>
<p><strong>HTML = 超文本标记语言</strong>（HyperText Markup
Language）<br />
它是网页的"骨架"，决定了页面的结构和内容。</p>
</blockquote>
<ul>
<li><strong>类比</strong>：写作文时的"提纲"</li>
<li><strong>作用</strong>：告诉浏览器"这里是一段文字"、"那里是一个标题"、"这是一个图片"</li>
</ul>
<p><strong>小实验：不写<code>&lt;html&gt;</code>、<code>&lt;head&gt;</code>、<code>&lt;body&gt;</code>也能显示？</strong></p>
<p>试试这个极简版本（新建一个文件 <code>simple.html</code>）：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>Hello World!<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>这样也能显示！<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>为什么没有<code>&lt;html&gt;</code>、<code>&lt;head&gt;</code>、<code>&lt;body&gt;</code>也能正常显示？</strong></p>
<p>浏览器的容错性：现代浏览器非常"聪明"，即使你没有写完整的HTML结构，它也会自动补全。</p>
<p><strong>那为什么还要写规范的标签？</strong></p>
<ol type="1">
<li><strong>代码更清晰</strong>：别人看你的代码时，一眼就知道结构</li>
<li><strong>避免错误</strong>：有些功能（如CSS样式、JavaScript）需要正确的结构才能正常工作</li>
<li><strong>专业习惯</strong>：养成好习惯，以后写复杂项目不会出错</li>
</ol>
<p><strong>反例：不规范标签确实会导致的问题</strong></p>
<p><strong>问题场景：JavaScript无法访问body元素</strong></p>
<p>虽然我们还没学JavaScript，但可以先看看这个例子。看这个错误示例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 错误示例：没有&lt;html&gt;和&lt;body&gt;标签，且脚本在内容之前 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 尝试动态创建元素并添加到body中</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> div = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;div&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    div.<span class="property">textContent</span> = <span class="string">&#x27;动态创建的内容&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(div);  <span class="comment">// 会报错！</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>测试页面<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>这里会报错<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>测试步骤</strong>：</p>
<ol type="1">
<li>把上面的代码保存为HTML文件并打开</li>
<li>在浏览器中按F12打开开发者工具</li>
<li>点击"控制台"（Console）标签</li>
<li><strong>结果</strong>：你会看到错误：<code>Cannot read properties of null (reading 'appendChild')</code></li>
</ol>
<p><strong>原因</strong>：没有<code>&lt;body&gt;</code>标签时，<code>document.body</code>是<code>null</code>（空值）。当脚本在内容之前执行时，浏览器还没有创建body元素，所以无法访问<code>document.body</code>，导致报错。</p>
<p><strong>正确的写法</strong>：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 现在可以正常访问body了</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> div = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;div&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">        div.<span class="property">textContent</span> = <span class="string">&#x27;动态创建的内容&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(div);  <span class="comment">// 成功！</span></span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>测试页面<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>这里正常运行<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>验证方法</strong>：能否在网页上看到“动态创建的内容”这句话</p>
<h2 id="记住浏览器能容错但好习惯更重要">&gt; 💡
<strong>记住</strong>：浏览器能容错，但<strong>好习惯</strong>更重要！</h2>
<h3 id="html5-是什么">5.2 HTML5 是什么？</h3>
<table>
<thead>
<tr class="header">
<th>版本</th>
<th>时间</th>
<th>特点</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>HTML 4</strong></td>
<td>1997</td>
<td>使用 <code>&lt;div&gt;</code> 万能标签</td>
</tr>
<tr class="even">
<td><strong>HTML5</strong></td>
<td>2014</td>
<td>新增<strong>语义化标签</strong>，让结构更清晰</td>
</tr>
</tbody>
</table>
<p><strong>为什么升级？</strong><br />
以前： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;header&quot;</span>&gt;</span>...<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;nav&quot;</span>&gt;</span>...<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;article&quot;</span>&gt;</span>...<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;footer&quot;</span>&gt;</span>...<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure> → 全是<code>&lt;div&gt;</code>，看不出结构</p>
<p>现在（HTML5）： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">header</span>&gt;</span>...<span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">nav</span>&gt;</span>...<span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">article</span>&gt;</span>...<span class="tag">&lt;/<span class="name">article</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">footer</span>&gt;</span>...<span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br></pre></td></tr></table></figure> → 标签本身就有意义，一目了然！</p>
<hr />
<h3 id="常用html5语义化标签">5.3 常用HTML5语义化标签</h3>
<table>
<thead>
<tr class="header">
<th>标签</th>
<th>含义</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><code>&lt;header&gt;</code></td>
<td>页眉</td>
<td>放网站标题、logo</td>
</tr>
<tr class="even">
<td><code>&lt;nav&gt;</code></td>
<td>导航栏</td>
<td>放菜单、链接</td>
</tr>
<tr class="odd">
<td><code>&lt;main&gt;</code></td>
<td>主要内容</td>
<td>页面核心内容</td>
</tr>
<tr class="even">
<td><code>&lt;article&gt;</code></td>
<td>独立文章</td>
<td>博客、新闻等</td>
</tr>
<tr class="odd">
<td><code>&lt;section&gt;</code></td>
<td>内容区块</td>
<td>划分不同区域</td>
</tr>
<tr class="even">
<td><code>&lt;aside&gt;</code></td>
<td>侧边栏</td>
<td>放广告、推荐</td>
</tr>
<tr class="odd">
<td><code>&lt;footer&gt;</code></td>
<td>页脚</td>
<td>版权信息、联系方式</td>
</tr>
</tbody>
</table>
<p><strong>生活类比</strong>：<br />
就像写一篇公众号文章： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">header</span>&gt;</span>文章标题 + 作者<span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">nav</span>&gt;</span>目录导航<span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">main</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">article</span>&gt;</span>正文内容<span class="tag">&lt;/<span class="name">article</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">aside</span>&gt;</span>相关推荐<span class="tag">&lt;/<span class="name">aside</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">footer</span>&gt;</span>版权声明<span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<hr />
<h3 id="为什么要用语义化标签">5.4 为什么要用语义化标签？</h3>
<table>
<thead>
<tr class="header">
<th>好处</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>✅ <strong>结构清晰</strong></td>
<td>开发者一看就懂页面布局</td>
</tr>
<tr class="even">
<td>✅ <strong>SEO友好</strong></td>
<td>搜索引擎更容易理解内容</td>
</tr>
<tr class="odd">
<td>✅ <strong>无障碍访问</strong></td>
<td>屏幕阅读器能更好识别</td>
</tr>
<tr class="even">
<td>✅ <strong>维护方便</strong></td>
<td>改样式时定位更快</td>
</tr>
</tbody>
</table>
<blockquote>
<p>💡 <strong>对初学者的意义</strong>：<br />
用语义化标签，就像<strong>用正确的词语写作文</strong>。<br />
不仅让别人看懂，也让自己未来更容易修改！</p>
</blockquote>
<hr />
<h3 id="实战搭建一个简单页面结构">5.5 实战：搭建一个简单页面结构</h3>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>我的博客<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">header</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>我的技术博客<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>记录学习点滴<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">nav</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>首页<span class="tag">&lt;/<span class="name">a</span>&gt;</span> |</span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>文章<span class="tag">&lt;/<span class="name">a</span>&gt;</span> |</span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>关于<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">main</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">article</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">h2</span>&gt;</span>第一篇文章<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是文章内容...<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">article</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">aside</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">h3</span>&gt;</span>推荐阅读<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>Vue入门指南<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">aside</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">footer</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>© 2025 我的博客<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<hr />
<h2 id="ai实战使用ai搭建一个有趣的心情打卡页面">6.
AI实战：使用AI搭建一个有趣的心情打卡页面</h2>
<h3 id="本节目标">6.1 本节目标</h3>
<p>我们将通过<strong>向AI提问（Prompt）</strong>，让AI帮我们：</p>
<ul>
<li>✅ 用HTML5做一个"今日心情打卡"页面</li>
<li>✅ 使用emoji表情选择心情</li>
<li>✅ 用HTML5的元素做有趣的交互（details折叠、progress进度条）</li>
<li>✅ 只需要非常少量的CSS和JavaScript，主要依赖HTML5！</li>
</ul>
<blockquote>
<p>💡 <strong>为什么这样设计？</strong><br />
让学习更有趣！用emoji和交互让页面"活起来"，同时学习HTML5的强大功能。</p>
</blockquote>
<hr />
<h3 id="第一步让ai生成一个心情打卡页面">6.2
第一步：让AI生成一个心情打卡页面</h3>
<h4 id="prompt-1创建一个心情打卡页面">📌 Prompt
1：创建一个心情打卡页面</h4>
<blockquote>
<p>"写一个HTML5页面，标题是'今日心情打卡'，包含：用radio按钮选择心情（开心😊、一般😐、不开心😞），一个文本框记录今天想说的话，一个提交按钮。使用HTML5语义化标签，用少量CSS让页面居中，emoji表情大一点。"</p>
</blockquote>
<h4 id="ai生成代码保存为-mood.html">✅ AI生成代码（保存为
<code>mood.html</code>）：</h4>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>今日心情打卡<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">        <span class="selector-tag">body</span> &#123;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">font-family</span>: <span class="string">&#x27;微软雅黑&#x27;</span>, Arial, sans-serif;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">margin-top</span>: <span class="number">50px</span>;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(<span class="number">135deg</span>, <span class="number">#f5f7fa</span> <span class="number">0%</span>, <span class="number">#c3cfe2</span> <span class="number">100%</span>);</span></span><br><span class="line"><span class="language-css">        &#125;</span></span><br><span class="line"><span class="language-css">        <span class="selector-class">.mood-option</span> &#123;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">font-size</span>: <span class="number">40px</span>;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">20px</span>;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">cursor</span>: pointer;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">display</span>: inline-block;</span></span><br><span class="line"><span class="language-css">        &#125;</span></span><br><span class="line"><span class="language-css">        <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;radio&quot;</span>]</span> &#123;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">display</span>: none;</span></span><br><span class="line"><span class="language-css">        &#125;</span></span><br><span class="line"><span class="language-css">        <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;radio&quot;</span>]</span><span class="selector-pseudo">:checked</span> + <span class="selector-tag">label</span> &#123;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.3</span>);</span></span><br><span class="line"><span class="language-css">            <span class="attribute">transition</span>: transform <span class="number">0.3s</span>;</span></span><br><span class="line"><span class="language-css">        &#125;</span></span><br><span class="line"><span class="language-css">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">header</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>📝 今日心情打卡<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">main</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">form</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">section</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">h2</span>&gt;</span>今天的心情是？<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">id</span>=<span class="string">&quot;happy&quot;</span> <span class="attr">name</span>=<span class="string">&quot;mood&quot;</span> <span class="attr">value</span>=<span class="string">&quot;happy&quot;</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;happy&quot;</span> <span class="attr">class</span>=<span class="string">&quot;mood-option&quot;</span>&gt;</span>😊<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">id</span>=<span class="string">&quot;neutral&quot;</span> <span class="attr">name</span>=<span class="string">&quot;mood&quot;</span> <span class="attr">value</span>=<span class="string">&quot;neutral&quot;</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;neutral&quot;</span> <span class="attr">class</span>=<span class="string">&quot;mood-option&quot;</span>&gt;</span>😐<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">id</span>=<span class="string">&quot;sad&quot;</span> <span class="attr">name</span>=<span class="string">&quot;mood&quot;</span> <span class="attr">value</span>=<span class="string">&quot;sad&quot;</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;sad&quot;</span> <span class="attr">class</span>=<span class="string">&quot;mood-option&quot;</span>&gt;</span>😞<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="tag">&lt;<span class="name">section</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;thoughts&quot;</span>&gt;</span>今天想说的话：<span class="tag">&lt;/<span class="name">label</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">textarea</span> <span class="attr">id</span>=<span class="string">&quot;thoughts&quot;</span> <span class="attr">name</span>=<span class="string">&quot;thoughts&quot;</span> <span class="attr">rows</span>=<span class="string">&quot;4&quot;</span> <span class="attr">cols</span>=<span class="string">&quot;40&quot;</span> </span></span><br><span class="line"><span class="tag">                          <span class="attr">placeholder</span>=<span class="string">&quot;记录一下今天的心情吧...&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span>&gt;</span>💾 保存<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>🔧 <strong>运行方法</strong>：<br />
1. 把代码保存为 <code>mood.html</code><br />
2. 双击文件，用浏览器打开<br />
3. 点击emoji选择心情，看看效果！</p>
</blockquote>
<p><strong>HTML5特性说明</strong>：</p>
<ul>
<li><code>type="radio"</code>：单选按钮，选择心情</li>
<li><code>&lt;textarea&gt;</code>：多行文本输入</li>
<li>少量CSS：让emoji点击时有放大效果（选中时变大）</li>
</ul>
<hr />
<h3 id="第二步让ai添加更多有趣的交互">6.3
第二步：让AI添加更多有趣的交互</h3>
<h4 id="prompt-2添加进度条和折叠区域">📌 Prompt
2：添加进度条和折叠区域</h4>
<blockquote>
<p>"在页面中添加：一个progress进度条显示本月打卡天数（比如15/30天），一个details折叠区域显示'打卡记录'，里面列出最近几天的打卡记录。用emoji美化一下。"</p>
</blockquote>
<h4 id="ai补充代码">✅ AI补充代码：</h4>
<p>在表单后添加：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">section</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>📊 本月打卡进度<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>已打卡 <span class="tag">&lt;<span class="name">strong</span>&gt;</span>15<span class="tag">&lt;/<span class="name">strong</span>&gt;</span> / <span class="tag">&lt;<span class="name">strong</span>&gt;</span>30<span class="tag">&lt;/<span class="name">strong</span>&gt;</span> 天<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">progress</span> <span class="attr">value</span>=<span class="string">&quot;15&quot;</span> <span class="attr">max</span>=<span class="string">&quot;30&quot;</span>&gt;</span>50%<span class="tag">&lt;/<span class="name">progress</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">details</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">summary</span>&gt;</span>📋 查看打卡记录<span class="tag">&lt;/<span class="name">summary</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">style</span>=<span class="string">&quot;text-align: left; max-width: 400px; margin: 0 auto;&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>2025-01-15 😊 今天学习很充实！<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>2025-01-14 😐 平平无奇的一天<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>2025-01-13 😊 完成了项目很开心<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">details</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>✅ <strong>HTML5新特性</strong>：<br />
- <code>&lt;progress&gt;</code>：进度条（纯HTML，显示打卡进度）<br />
-
<code>&lt;details&gt;</code>和<code>&lt;summary&gt;</code>：可折叠的内容区域（点击展开/收起记录）</p>
</blockquote>
<hr />
<h3 id="第三步让ai添加简单的交互效果">6.4
第三步：让AI添加简单的交互效果</h3>
<h4 id="prompt-3添加简单的javascript交互">📌 Prompt
3：添加简单的JavaScript交互</h4>
<blockquote>
<p>"添加一个简单的JavaScript，当选择不同心情时，在页面上显示对应的提示文字（比如选择开心显示'今天要加油哦！'）。用最少量的代码实现。"</p>
</blockquote>
<h4 id="ai补充代码-1">✅ AI补充代码：</h4>
<p>在<code>&lt;/body&gt;</code>前添加：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> radios = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;input[name=&quot;mood&quot;]&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> form = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;form&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    radios.<span class="title function_">forEach</span>(<span class="function"><span class="params">radio</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        radio.<span class="title function_">addEventListener</span>(<span class="string">&#x27;change&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">const</span> messages = &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="string">&#x27;happy&#x27;</span>: <span class="string">&#x27;😊 今天要加油哦！&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="string">&#x27;neutral&#x27;</span>: <span class="string">&#x27;😐 放轻松，慢慢来&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="string">&#x27;sad&#x27;</span>: <span class="string">&#x27;😞 一切都会好起来的！&#x27;</span></span></span><br><span class="line"><span class="language-javascript">            &#125;;</span></span><br><span class="line"><span class="language-javascript">            </span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 移除旧的提示</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">const</span> oldMsg = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.mood-message&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">if</span> (oldMsg) oldMsg.<span class="title function_">remove</span>();</span></span><br><span class="line"><span class="language-javascript">            </span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 添加新提示</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">const</span> msg = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;p&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">            msg.<span class="property">className</span> = <span class="string">&#x27;mood-message&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">            msg.<span class="property">textContent</span> = messages[<span class="variable language_">this</span>.<span class="property">value</span>];</span></span><br><span class="line"><span class="language-javascript">            msg.<span class="property">style</span>.<span class="property">fontSize</span> = <span class="string">&#x27;20px&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">            msg.<span class="property">style</span>.<span class="property">color</span> = <span class="string">&#x27;#333&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">            form.<span class="title function_">insertBefore</span>(msg, form.<span class="property">lastElementChild</span>);</span></span><br><span class="line"><span class="language-javascript">        &#125;);</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>✅ <strong>交互效果</strong>：<br />
- 选择不同心情时，会自动显示对应的鼓励文字<br />
- 用最少的JavaScript代码实现简单的交互</p>
</blockquote>
<hr />
<h3 id="最终效果">6.5 最终效果</h3>
<p>你的页面现在有：</p>
<ul>
<li>✅ emoji心情选择（点击有放大效果）</li>
<li>✅ 文本记录区域</li>
<li>✅ 打卡进度条（progress标签）</li>
<li>✅ 可折叠的打卡记录（details/summary）</li>
<li>✅ 选择心情时的自动提示（少量JavaScript）</li>
</ul>
<p><strong>测试方法</strong>：</p>
<ol type="1">
<li>点击不同的emoji → 选中的emoji会放大，同时显示鼓励文字</li>
<li>点击"查看打卡记录" → 内容会展开/收起</li>
<li>输入文字，点击保存 → 表单会提交（虽然只是演示）</li>
</ol>
<hr />
<h3 id="本节收获">6.6 本节收获</h3>
<p>你已经学会了：</p>
<ul>
<li>✅ 如何用 <strong>Prompt</strong> 让AI帮你写HTML代码</li>
<li>✅ HTML5的表单元素（radio、textarea）</li>
<li>✅ HTML5的特殊元素（progress、details/summary）</li>
<li>✅ 如何用少量CSS和JavaScript让页面更有趣</li>
<li>✅ 如何一步步<strong>迭代功能</strong>，像搭积木一样开发</li>
</ul>
<blockquote>
<p>🌟 <strong>记住</strong>：<br />
HTML5本身就很强大，加上一点点CSS和JavaScript，就能做出有趣又实用的页面！<br />
<strong>想法 → 写Prompt → AI生成 → 测试 → 调整 → 再提问</strong><br />
这就是现代开发者的"超能力"！</p>
</blockquote>
<h2
id="浏览器调试技巧f12的三大法宝">7.*浏览器调试技巧（F12的三大法宝）</h2>
<h3 id="怎么打开f12">🔧 怎么打开F12？</h3>
<ul>
<li><strong>快捷键</strong>：在网页上按 <code>F12</code> 或
<code>Ctrl + Shift + I</code></li>
<li><strong>右键菜单</strong>：在网页空白处 → 右键 →
“检查”或“审查元素”</li>
</ul>
<blockquote>
<p>🌟 打开后你会看到一个新面板，这就是“开发者工具”。</p>
</blockquote>
<hr />
<h3 id="元素标签页-查看和修改网页结构">1. 【元素】标签页 ——
查看和修改网页结构</h3>
<p><strong>作用</strong>：<br />
👉 看到网页的HTML代码是怎样的<br />
👉 实时修改文字、颜色、样式，马上看到效果</p>
<p><strong>小实验</strong>：</p>
<ol type="1">
<li>打开前面做的 <code>mood.html</code></li>
<li>按 <code>F12</code> → 点击【元素】（Elements）</li>
<li>在代码中找到 <code>&lt;h1&gt;📝 今日心情打卡&lt;/h1&gt;</code></li>
<li>双击文字，改成"📝 我的心情日记"</li>
<li>看看页面是不是立刻变了？</li>
</ol>
<blockquote>
<p>✅ <strong>用途</strong>：<br />
- 调试页面布局<br />
- 学习别人网页是怎么做的<br />
- 临时改内容“假装”成功（别干坏事哦 😄）</p>
</blockquote>
<hr />
<h3 id="控制台标签页-和javascript对话">2. 【控制台】标签页 ——
和JavaScript对话</h3>
<p><strong>作用</strong>：<br />
👉 显示代码错误（红色提示）<br />
👉 直接运行JavaScript代码<br />
👉 输出调试信息（比如 <code>console.log()</code>）</p>
<p><strong>小实验</strong>：</p>
<ol type="1">
<li>打开 <code>mood.html</code></li>
<li>按 <code>F12</code> → 点【控制台】（Console）</li>
<li>在控制台输入：<code>console.log("Hello World!")</code>，按回车</li>
<li>你会看到输出：<code>Hello World!</code></li>
<li>再试试：输入 <code>2 + 3</code>，按回车，会显示 <code>5</code></li>
</ol>
<blockquote>
<p>✅ <strong>用途</strong>：<br />
- 查看哪里出错了（红字警告）<br />
- 测试JS代码（比如在控制台输入 <code>2+3</code> 回车试试）<br />
- 调试变量值</p>
</blockquote>
<hr />
<h3 id="网络标签页-看网页下载了什么">3. 【网络】标签页 ——
看网页“下载了什么”</h3>
<p><strong>作用</strong>：<br />
👉 显示网页加载时请求了哪些文件（HTML、CSS、JS、图片等）<br />
👉 查看加载速度<br />
👉 发现“加载失败”的资源（比如404）</p>
<p><strong>小实验</strong>：</p>
<ol type="1">
<li>打开 <code>mood.html</code></li>
<li>按 <code>F12</code> → 点【网络】（Network）</li>
<li>刷新页面</li>
<li>你会看到文件被加载：
<ul>
<li><code>mood.html</code>（你的页面）</li>
</ul></li>
<li>点这个文件，能看到它的大小、加载时间</li>
</ol>
<blockquote>
<p>✅ <strong>用途</strong>：<br />
- 网页打不开？看是不是某个文件“红色”了（失败）<br />
- 页面慢？看哪个文件加载最久<br />
- 验证CDN是否生效</p>
</blockquote>
<hr />
<h3 id="应用标签页-查看网页存储的数据">4. 【应用】标签页 ——
查看网页存储的数据</h3>
<p><strong>作用</strong>：<br />
👉 查看网页存储的各种数据（Cookie、本地存储等）<br />
👉 清除存储的数据<br />
👉 调试数据存储问题</p>
<h4 id="cookie小饼干">4.1 Cookie（小饼干）</h4>
<p><strong>什么是Cookie？</strong></p>
<p>Cookie就像网站的"小纸条"，服务器给你一个小纸条，你下次访问时带着这个纸条，服务器就知道你是谁了。</p>
<img src="/2025-09-26-02-Web%E5%BC%80%E5%8F%91%E5%9F%BA%E7%A1%80/cookie.webp" class="" title="任务管理器">
<p><strong>常见用途</strong>：</p>
<ul>
<li>记住你的登录状态（比如"记住我"功能）</li>
<li>保存你的偏好设置（比如语言、主题）</li>
</ul>
<p><strong>在F12中查看Cookie</strong>：</p>
<ol type="1">
<li>按 <code>F12</code> → 点击【应用】（Application）</li>
<li>左侧找到"Cookie" → 展开</li>
<li>点击网站地址，右侧会显示所有Cookie</li>
</ol>
<p><strong>小实验</strong>：</p>
<ol type="1">
<li>打开任意网站（如百度、淘宝）</li>
<li>按 <code>F12</code> → 【应用】→ 【Cookie】</li>
<li>你会看到很多Cookie，比如用户名、登录token等</li>
</ol>
<blockquote>
<p>💡
<strong>通俗理解</strong>：Cookie就像餐厅的会员卡，你每次来，服务员（服务器）看到卡就知道你是谁。</p>
</blockquote>
<h4 id="localstorage本地存储">4.2 LocalStorage（本地存储）</h4>
<p><strong>什么是LocalStorage？</strong></p>
<p>LocalStorage是浏览器提供的"本地仓库"，网页可以把数据存在这里，即使关闭浏览器，数据也不会丢失。</p>
<p><strong>常见用途</strong>：</p>
<ul>
<li>保存用户的设置（比如深色模式开关）</li>
<li>保存草稿内容（比如写了一半的评论）</li>
</ul>
<p><strong>在F12中查看LocalStorage</strong>：</p>
<ol type="1">
<li>按 <code>F12</code> → 【应用】→ 【本地存储】（Local Storage）</li>
<li>点击网站地址，右侧显示存储的键值对</li>
</ol>
<p><strong>小实验</strong>：</p>
<ol type="1">
<li>在控制台输入：<code>localStorage.setItem('test', 'Hello')</code></li>
<li>按 <code>F12</code> → 【应用】→ 【本地存储】</li>
<li>你会看到 <code>test: Hello</code></li>
<li>在控制台输入：<code>localStorage.getItem('test')</code>，会显示
<code>Hello</code></li>
</ol>
<blockquote>
<p>💡
<strong>通俗理解</strong>：LocalStorage就像你的"抽屉"，网页可以把东西放进去，下次打开还能拿出来。</p>
</blockquote>
<h4 id="indexeddb数据库">4.3 IndexedDB（数据库）</h4>
<p><strong>什么是IndexedDB？</strong></p>
<p>IndexedDB是浏览器提供的"数据库"，可以存储大量复杂数据（比LocalStorage强大）。</p>
<p><strong>常见用途</strong>：</p>
<ul>
<li>存储离线数据（比如离线地图）</li>
<li>存储大量用户数据（比如聊天记录）</li>
</ul>
<p><strong>在F12中查看IndexedDB</strong>：</p>
<ol type="1">
<li>按 <code>F12</code> → 【应用】→ 【IndexedDB】</li>
<li>展开可以看到数据库和表结构</li>
</ol>
<blockquote>
<p>💡
<strong>通俗理解</strong>：IndexedDB就像"图书馆"，可以存储大量、复杂的数据，而且可以快速查找。</p>
</blockquote>
<p><strong>对比三种存储方式</strong>：</p>
<table>
<thead>
<tr class="header">
<th>存储方式</th>
<th>容量</th>
<th>用途</th>
<th>类比</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>Cookie</strong></td>
<td>很小（4KB）</td>
<td>登录状态、用户偏好</td>
<td>小纸条</td>
</tr>
<tr class="even">
<td><strong>LocalStorage</strong></td>
<td>较大（5-10MB）</td>
<td>用户设置、草稿</td>
<td>抽屉</td>
</tr>
<tr class="odd">
<td><strong>IndexedDB</strong></td>
<td>很大（几百MB）</td>
<td>大量复杂数据</td>
<td>图书馆</td>
</tr>
</tbody>
</table>
<hr />
<h3 id="网络标签页高级用法-监控网络请求">5. 【网络】标签页高级用法 ——
监控网络请求</h3>
<p><strong>作用</strong>（补充）：<br />
👉 监控网页发送的所有请求（不限于加载文件）<br />
👉 查看请求的详细信息（请求头、响应内容等）<br />
👉 调试API接口问题</p>
<p><strong>查看API请求</strong>：</p>
<ol type="1">
<li>按 <code>F12</code> → 点【网络】（Network）</li>
<li>在网页上操作（比如提交表单、点击按钮）</li>
<li>你会看到新的请求出现在列表中</li>
<li>点击某个请求，可以看到：
<ul>
<li><strong>请求头</strong>：发送了什么信息</li>
<li><strong>响应</strong>：服务器返回了什么数据</li>
<li><strong>状态码</strong>：200（成功）、404（未找到）、500（服务器错误）等</li>
</ul></li>
</ol>
<p><strong>状态码说明</strong>（常见）：</p>
<ul>
<li><strong>200</strong>：成功 ✅</li>
<li><strong>404</strong>：找不到（比如文件不存在）❌</li>
<li><strong>500</strong>：服务器出错了 ❌</li>
</ul>
<p><strong>小实验</strong>：</p>
<ol type="1">
<li>打开任意网站（如微博、知乎）</li>
<li>按 <code>F12</code> → 【网络】</li>
<li>在网页上滚动、点击，观察网络请求</li>
<li>点击某个请求，查看详细信息</li>
</ol>
<blockquote>
<p>💡
<strong>通俗理解</strong>：网络标签页就像"监控摄像头"，记录网页和服务器之间的所有"对话"。</p>
</blockquote>
<hr />
<h3 id="总结f12五大功能">🌟 总结：F12五大功能</h3>
<table>
<thead>
<tr class="header">
<th>标签页</th>
<th>一句话用途</th>
<th>新手怎么用</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>元素</strong></td>
<td>看和改HTML</td>
<td>改文字、学结构</td>
</tr>
<tr class="even">
<td><strong>控制台</strong></td>
<td>看错误、运行JS</td>
<td>查错、打印信息</td>
</tr>
<tr class="odd">
<td><strong>网络</strong></td>
<td>看加载了啥、监控请求</td>
<td>查404、看速度、调试API</td>
</tr>
<tr class="even">
<td><strong>应用</strong></td>
<td>查看存储的数据</td>
<td>看Cookie、LocalStorage</td>
</tr>
</tbody>
</table>
<blockquote>
<p>💡 <strong>记住</strong>：<br />
F12不是"高级功能"，而是<strong>每个前端开发者的日常工具</strong>。<br />
遇到问题，先按F12，90%的bug都能找到线索！</p>
</blockquote>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/AI%E9%A9%B1%E5%8A%A8Web%E5%BC%80%E5%8F%91%E6%8A%80%E6%9C%AF/" rel="tag"># AI驱动Web开发技术</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2025-09-26-01-AI%E5%BC%80%E5%8F%91%E5%8A%A9%E6%89%8B/" rel="prev" title="01. AI开发助手">
                  <i class="fa fa-angle-left"></i> 01. AI开发助手
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2025-11-11-03-CSS%E4%B8%8E%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1/" rel="next" title="03.CSS与响应式设计">
                  03.CSS与响应式设计 <i class="fa fa-angle-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






    <div class="comments utterances-container"></div>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">

  <div class="copyright">
    &copy; 
    <span itemprop="copyrightYear">2025</span>
    <span class="with-love">
      <i class="fa fa-heart"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">CSGrandeur</span>
  </div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>
  <div class="sidebar-dimmer"></div>
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up fa-lg"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


  
  <script src="https://fastly.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://fastly.jsdelivr.net/npm/@next-theme/pjax@0.6.0/pjax.min.js" integrity="sha256-vxLn1tSKWD4dqbMRyv940UYw4sXgMtYcK6reefzZrao=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/sidebar.js"></script><script src="/js/next-boot.js"></script><script src="/js/pjax.js"></script>

  <script src="https://fastly.jsdelivr.net/npm/hexo-generator-searchdb@1.4.1/dist/search.js" integrity="sha256-1kfA5uHPf65M5cphT2dvymhkuyHPQp5A53EGZOnOLmc=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>







  




  

  <script class="next-config" data-name="enableMath" type="application/json">true</script><script class="next-config" data-name="mathjax" type="application/json">{"enable":true,"tags":"none","js":{"url":"https://fastly.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-mml-chtml.js","integrity":"sha256-MASABpB4tYktI2Oitl4t+78w/lyA+D7b/s9GEP0JOGI="}}</script>
<script src="/js/third-party/math/mathjax.js"></script>


<script class="next-config" data-name="utterances" type="application/json">{"enable":true,"repo":"CSGrandeur/csgrandeur.github.io","issue_term":"pathname","theme":"github-light"}</script>
<script src="/js/third-party/comments/utterances.js"></script>

</body>
</html>
